import React, { useState, FC, useCallback } from 'react'
import { Button, Form } from 'antd'
import { connect } from 'dva'
import { EnhanceModalForm } from '@/components'

import ListTemp from './components/list'
import pageConfig from './config/pageConfig'
const { namespace, pageName } = pageConfig

interface PageProps {}

const Page: FC<PageProps> = (props: any) => {
    const {
        actions,
        [namespace]: { modalCondition, confirmLoading, spinning, fields, pagination, list },
    }: any = props

    const [form] = Form.useForm()

    const [visible, setVisible]: any = useState(false)

    const handleShowModal = useCallback(() => {
        setVisible(Symbol(''))
        actions.fetchInitModal()
    }, [visible, actions])

    //保存表单
    const handleSaveForm = useCallback(
        (values) => {
            actions.fetchRegionAdd({ ...values })
        },
        [actions],
    )
    //隐藏表单
    const handleHideForm = useCallback(() => {
        setVisible(false)
    }, [visible])

    const listProps = {
        actions,
        spinning,
        fields,
        pagination,
        list,
        onChange: (page: any, filter: any) => {
            const { current, pageSize } = page

            let payload: any = {
                pn: current,
                ps: pageSize,
            }

            actions.fetchList(payload)
        },
    }

    //注册运营主体
    const modalProps = {
        form,
        visible,
        width: 680,
        confirmLoading,
        queryCondition: modalCondition,
        title: '新增区域',
        formInitialValues: {},
        onSave: (values: any) => handleSaveForm(values),
        onCancel: () => handleHideForm(),
    }

    return (
        <>
            <div className='pageTitle'>{pageName}</div>
            <div className='pageBox'>
                <div className='contentPrimary'>
                    <Button type='primary' style={{ float: 'right' }} onClick={() => handleShowModal()}>
                        新增区域
                    </Button>
                    <h2 className='commonTit' style={{ display: 'inline', lineHeight: '32px' }}>
                        区域管理
                    </h2>
                    <ListTemp {...listProps} />
                </div>
            </div>
            <EnhanceModalForm {...modalProps} />
        </>
    )
}

// 配置model
const mapStateToProps = (props: any) => {
    return {
        [namespace]: props[namespace],
    }
}

// 处理状态
const mapDispatchToProps = (dispatch: any) => {
    return {
        actions: {
            fetchList(payload: any) {
                dispatch({
                    type: `${namespace}/fetchList`,
                    payload,
                })
            },
            fetchRegionAdd(payload: any) {
                dispatch({
                    type: `${namespace}/fetchRegionAdd`,
                    payload,
                })
            },
            fetchInitModal(payload: any) {
                dispatch({ type: `${namespace}/fetchUpperAreaList` })
            },
        },
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Page)
